<template>
  <div class="setting">
    <template v-if="tabType == 'data'">
      <div class="card">
        <div class="title">导航样式</div>
        <div class="content">
          <el-form-item label="选择样式">
            <el-radio-group class="custom-radio-button" v-model="settingData.mode">
              <el-radio-button :label="1">
                <sa-icon icon="sa-shop-decorate-tabbar-mode-1" />
              </el-radio-button>
              <el-radio-button :label="2">
                <sa-icon icon="sa-shop-decorate-tabbar-mode-2" />
              </el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="导航风格">
            <el-radio-group v-model="settingData.layout">
              <el-radio :label="1">文字+图片</el-radio>
              <el-radio :label="2">文字</el-radio>
              <el-radio :label="3">图片</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="默认颜色">
            <dc-color-picker v-model="settingData.inactiveColor"></dc-color-picker>
          </el-form-item>
          <el-form-item label="选中颜色">
            <dc-color-picker v-model="settingData.activeColor"></dc-color-picker>
          </el-form-item>
        </div>
      </div>
      <dc-list
        v-model="settingData.list"
        :itemProp="{
          inactiveIcon: '',
          activeIcon: '',
          url: '',
          text: '',
        }"
      >
        <template #title>图标设置</template>
        <template #listItem="{ element }">
          <template v-if="settingData.layout == 1 || settingData.layout == 3">
            <el-form-item label="默认图片">
              <div class="sa-flex">
                <sa-uploader v-model="element.inactiveIcon" fileType="image"></sa-uploader>
                <span class="tip">建议尺寸：44*44</span>
              </div>
            </el-form-item>
            <el-form-item label="选中图片">
              <div class="sa-flex">
                <sa-uploader v-model="element.activeIcon" fileType="image"></sa-uploader>
                <span class="tip">建议尺寸：44*44</span>
              </div>
            </el-form-item>
          </template>
          <el-form-item v-if="settingData.layout == 1 || settingData.layout == 2" label="文字">
            <el-input v-model="element.text"></el-input>
          </el-form-item>
          <el-form-item label="选择链接">
            <dc-url v-model="element.url"></dc-url>
          </el-form-item>
        </template>
      </dc-list>
    </template>
    <template v-if="tabType == 'style'">
      <div class="card">
        <div class="title">组件样式</div>
        <div class="content">
          <el-form-item label="导航背景">
            <el-radio-group v-model="settingData.background.type">
              <el-radio label="color">纯色</el-radio>
              <el-radio label="image">图片</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item v-if="settingData.background.type == 'color'" label="选择颜色">
            <dc-color-picker v-model="settingData.background.bgColor"></dc-color-picker>
          </el-form-item>
          <el-form-item v-if="settingData.background.type == 'image'" label="选择图片">
            <div class="sa-flex">
              <sa-uploader v-model="settingData.background.bgImage" fileType="image"></sa-uploader>
            </div>
          </el-form-item>
        </div>
      </div>
    </template>
  </div>
</template>

<script setup>
  import dcList from '../../common/dc-list.vue';
  import dcUrl from '../../common/dc-url.vue';
  import dcColorPicker from '../../common/dc-color-picker.vue';

  const props = defineProps(['settingData', 'tabType']);
</script>
